<template>
    <div class="swiperBox">
        <swiper :slides-per-view="5" :loop="true" :autoplay="{
            disableOnInteraction: false,
            delay: 5000
        }" :centered-slides="true" :modules="modules" :pagination="{
    el: '.pagination',
    clickable: true
}">
            <swiper-slide v-for="(item, index) in banners" :key="index">
                <img :src="item">
            </swiper-slide>
        </swiper>
    </div>
    <!-- swiperBox -->

    <div class="pagination"></div>
</template>
    
<script lang="ts" setup>
import { Autoplay, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/pagination';

import banner1 from '@/assets/images/banner1.jpg';
import banner2 from '@/assets/images/banner2.png';
import banner3 from '@/assets/images/banner3.jpg';
import banner4 from '@/assets/images/banner4.png';
import banner5 from '@/assets/images/banner5.jpg';

const modules = [Autoplay, Pagination];
const banners = [banner1, banner2, banner3, banner4, banner5]
</script>
<style lang="less" scoped>
.swiperBox {
    margin: 0 auto;

    .swiper {
        padding-top: 140px;
        width: 800px;
        margin-left: -150px;
    }

    img {
        width: 100%;
        display: block;
        border-radius: 4px;
        transition: all 0.5s;
    }

    ::v-deep .swiper-silder {
        position: relative;
        border-radius: 6px;
        overflow: hidden;

        &::after {
            content: ' ';
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 11;
            position: absolute;
        }
    }

    ::v-deep .swiper-slide-active {
        position: relative;
        height: 320px;
        overflow: visible;
        z-index: 11;

        img {
            // width: 800px;
            transform: scale(2);
            transform-origin: center !important;
            position: absolute;
            left: 0;
        }

        &::after {
            display: none;
        }
    }
}

.pagination {
    text-align: center;

    ::v-deep .swiper-pagination-bullet {
        width: 25px;
        height: 25px;
        background: white;
        border-radius: 6px;
        margin: 0 15px;
        opacity: 1;
        cursor: pointer;

    }

    &.swiper-pagination-bullet-active {
        background: #FFDC1D;
    }
}
</style>